<template>
  <div class="region art-custom-card active-user">
    <h4 class="box-title">用户概述</h4>
    <div ref="myEcharts" class="chart"></div>
  </div>
</template>

<script lang="ts" setup>
  import * as echarts from 'echarts'
  import { ref, onMounted, onUnmounted } from 'vue'

  onMounted(() => {
    initChart()
  })

  onUnmounted(() => {
    myChart.value.dispose()
    window.removeEventListener('resize', myChart.value.resize)
  })

  const props = defineProps<{
    data: any
  }>()

  // 把配置和数据
  const myData = [
    { value: 100, name: '男性' },
    { value: 10, name: '女性' }
  ]

  watch(
    () => props.data,
    (newVal) => {
      if (newVal) {
        myData.map((item) => {
          if (item.name === '男性') {
            item.value = newVal.man
          } else {
            item.value = newVal.woman
          }
        })
        initChart()
      }
    }
  )

  //隐藏title
  const hideTitle = (e) => {
    myChart.value.setOption({
      title: {
        text: '',
        subtext: ''
      }
    })
  }
  //显示title
  const showTitle = (e) => {
    myChart.value.setOption({
      title: {
        text: '总数量',
        subtext: myData.reduce((sum, item) => {
          return sum + item.value
        }, 0)
      }
    })
  }

  let myChart = ref(null)
  const myEcharts = ref(null)

  const initChart = () => {
    echarts.init(myEcharts.value).dispose()
    myChart.value = echarts.init(myEcharts.value)

    // 给饼图添加事件
    // 当区域高亮时隐藏title，比如当鼠标移动到legend上时
    myChart.value.on('highlight', hideTitle)
    // 当鼠标悬浮到区域时隐藏title
    myChart.value.on('mouseover', hideTitle)
    // 当鼠标离开区域时显示title
    myChart.value.on('mouseout', showTitle)
    // 当区域取消高亮时显示title，比如当鼠标从legend上离开时
    myChart.value.on('downplay', showTitle)

    // 设置option
    const conf = {
      title: {
        text: '总数量',

        subtext: myData.reduce((sum, item) => {
          return sum + item.value
        }, 0),
        x: '34%',
        y: '43%',
        textAlign: 'center',
        textStyle: {
          color: '#000',
          fontSize: '24px',
          fontWeight: 'bold',
          lineHeight: 30
        },
        subtextStyle: {
          color: '#000',
          fontSize: '24px',
          fontWeight: 'bold'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {d}%'
      },
      legend: {
        show: true,
        y: 'center',
        left: 'right',
        // selectedMode: false, // 控制是否可以通过点击图例改变系列的显示状态
        orient: 'vertical', // 布局方式，默认为水平布局，可选为：'horizontal' ¦ 'vertical'
        // x: "right", // 水平安放位置，默认为全图居中，可选为：
        // 'center' ¦ 'left' ¦ 'right'
        // ¦ {number}（x坐标，单位px）
        // y: "center", // 垂直安放位置，默认为全图顶端，可选为：
        // 'top' ¦ 'bottom' ¦ 'center'
        // ¦ {number}（y坐标，单位px）
        padding: [0, 20, 0, 10],
        align: 'left', //图例文字在右边
        itemGap: 20, // 图例间隙

        textStyle: {
          //图例文字的样式
          color: '#333',
          fontSize: '16px'
          // lineHeight: 14,
          // rich: {
          //   a: {
          //     verticalAlign: "middle", //top、middle、bottom
          //   },
          // },
          // padding: [0, 0, 0, 20],
        },
        data: myData.map((item) => item.name), //图例组件
        formatter: (name) => {
          let num = ''
          myData.forEach((item) => {
            //格式化图例文本，支持字符串模板和回调函数两种形式。
            if (item.name === name) {
              num = String(item.value).replace(/(\d)(?=(?:\d{6})+$)/g, '$1.')
              return
            }
          })
          return name + '：' + num
        }
      },
      series: [
        {
          name: '分类统计',
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['35%', '50%'], //偏移
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          // 鼠标悬浮时中心位置显示对应区域的信息
          emphasis: {
            label: {
              show: true,
              formatter: `{b}\n{c}`,
              fontSize: '24px', //24 直接写有放大的效果
              fontWeight: 'bold',
              // color: () => {},
              lineHeight: 30
            }
          },
          labelLine: {
            show: false
          },
          data: myData
        }
      ]
    }
    myChart.value.setOption(conf)
    window.addEventListener('resize', myChart.value.resize)
  }
</script>

<style lang="scss" scoped>
  .dark {
    .region {
      .chart {
        background: none;
      }
    }
  }

  .region {
    box-sizing: border-box;
    width: 50%;
    height: 420px;
    padding: 16px;
    margin-right: 10px;
    .chart {
      box-sizing: border-box;
      width: 100%;
      height: 380px;
      padding: 20px 0 20px 20px;
      border-radius: calc(var(--custom-radius) / 2 + 4px) !important;
    }

    .text {
      margin-left: 3px;

      h3 {
        margin-top: 20px;
        font-size: 18px;
        font-weight: 500;
      }

      p {
        margin-top: 5px;
        font-size: 14px;

        &:last-of-type {
          height: 42px;
          margin-top: 5px;
        }
      }
    }
  }

  @media screen and (max-width: $device-phone) {
    .dark {
      .active-user {
        .chart {
          padding: 15px 0 0 !important;
        }
      }
    }
  }
</style>
